<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
	<link href="/others/zui/dist/css/zui.css" rel="stylesheet">
	<script type="text/javascript" src="/others/jquery-2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="/others/zui/dist/js/zui.min.js"></script>
	<style type="text/css">
		.img_a{margin:0px auto; width:550px; height:420px; overflow:hidden; _position:relative;}
		.img_a .img_b{margin-right:130px; position:relative; width:420px; height:420px; _position:absolute; _top:0px; _left:0px;}
		.img_a .img_c{float:right; position:relative; width:120px; overflow:hidden; height:420px; _position:absolute; _top:0px; _left:430px;}
		.img_a .img_d{filter:alpha(opacity=60); opacity:0.6; background-color:#000; position:absolute; z-index:1;}
		.img_a .img_b img{max-height:420px; max-width:420px;}
		.img_a #img_b1{top:0px; left:0px; height:150px; width:420px;}
		.img_a #img_b2{left:0px; top:150px; width:150px; height:120px;}
		.img_a #img_b4{right:0px; top:150px; width:150px; height:120px;}
		.img_a #img_b5{bottom:0px; left:0px; height:150px; width:420px;}
		.img_a #img_b3{width:120px; height:120px; top:150px; left:150px; cursor:move; background:none;}
		.img_a #img_div{width:100%; height:100%; background-color:#FFF; filter:alpha(opacity=10); opacity:0.1;}

		.img_a .img_c_1,.img_a .img_c_2,.img_a .img_c_3{position:relative; background-color:#F5F5F5; overflow:hidden;}
		.img_a .img_c p{margin:0px; padding:0px; padding-bottom:10px; line-height:25px; color:#999; font-size:12px;}
		.img_a .img_c img{position:absolute; top:0px; left:0px;}
		.img_a .img_c_1{width:120px; height:120px;}

		.img_a #img_c1{height:120px; width:120px; background-color:#000; top:0px; left:0px; filter:alpha(opacity=1); opacity:0.01;}
		.img_a #img_c4{position:absolute;}
		.img_a #img_dsf{cursor:nw-resize; position:absolute; left:110px; top:110px; width:10px; height:10px; background-color:#004000; z-index:5px;}
	</style>
</head>

<body>
	<div class="bodying">
		<form class="form-horizontal form-condensed" role="form" id="create">
			<legend>用户注册</legend>
			<div class="form-group"><label class="col-md-2 control-label required">用户名</label><div class="col-md-2"><input type='text' name='name' value='' class="form-control" placeholder="输入登陆账户名（昵称）"/></div><i class="tishi"></i></div>
			<div class="form-group"><label class="col-md-2 control-label required">登陆账号</label><div class="col-md-2"><input type='text' name='accounts' id="accounts" value='' class='form-control' placeholder="请输入登陆账户"/></div><i class="tishi"></i></div>
			<div class="form-group"><label class="col-md-2 control-label required">密码</label><div class="col-md-2"><input type='password' name='password1' id="password1" value='' class='form-control' placeholder="请输入登陆密码"/></div><i class="tishi"></i></div>
			<div class="form-group"><label class="col-md-2 control-label required">确认密码</label><div class="col-md-2"><input type='password' name='password2' id="password2" value='' class='form-control' placeholder="请重复登陆密码"/></div><i class="tishi"></i></div>
			<div class="form-group"><label class="col-md-2 control-label required">联系手机</label><div class="col-md-2"><input type='text' name='phone' id="phone" value='' class='form-control' placeholder="输入您的手机号，方便我们联系"/></div><i class="tishi"></i></div>
			<div class="form-group">
				<label class="col-md-2 control-label">所住栋数</label>
				<div class="col-md-2">
					<select name='original' id='building' class='form-control'>
						<option value='1' selected='selected'>湖南理工南湖学院东一栋</option>
						<option value='2'>东二栋</option>
						<option value='3'>东三栋</option>
						<option value='4'>东四栋</option>
						<option value='5'>东五栋</option>
						<option value='6'>东六栋</option>
					</select>
				</div>
			</div>
			<div class="form-group"><label class="col-md-2 control-label required">寝室号</label><div class="col-md-2"><input type='text' name='dorm' value='' class='form-control' placeholder="请输入所住寝室"/></div><i class="tishi"></i></div>
			<div class="form-group">
				<div class="col-md-offset-2 col-md-10">
					<button type="button" class="btn btn-primary">登陆账户</button>
					<button type="button" class="btn btn-success" onclick="checkout()">提交注册</button>
					<button type="button" class="btn btn-warning">忘记密码</button>
					<button type="button" class="btn btn-info">找回密码</button>
				</div>
			</div>
			<div style="position:absolute;right:20%;top:10%;">
				<span class="label label-badge label-info">提交用户头像格式：120x120的jpg格式</span>
				<input type="file" name="userimg" id="imgOne" onchange="preImg(this.id,'imgPre');" />
				<!--<img id="imgPre" src="" style="display: block; width: 160px; height: 160px" />-->
				<div class="img_a">
					<div class="img_c">
						<div class="img_c_1">
							<img src="" id="img_1" style="max-width:none" onload="convertImageToCanvas(this)">
						</div>
						<p>宽度*高度=120*120</p>
					</div>
					<div class="img_b" id="img_b">
						<div class="img_d" id="img_b1"></div>
						<div class="img_d" id="img_b2"></div>
						<div class="img_d" id="img_b3">
							<div id="img_div"></div>
							<div id="img_dsf"></div>
						</div>
						<div class="img_d" id="img_b4"></div>
						<div class="img_d" id="img_b5"></div>
						<img src="" onload="img_sf(this);" height="420" id="imgPre"></div>
				</div>
			</div>
		</form>
	</div>
<script >
	$("#create input").on("change", function(){
		var chils=this.parentNode.parentNode.childNodes
		if(this.name=="password2"){//判断两次密码是否相同
			var psw1=document.getElementById("password1").value
			var psw2=this.value
			if(psw1==psw2){
				chils[2].innerHTML=""//输入正确后，删除以前的错误提示
				chils[0].className="col-md-2 control-label"
				return
			}else {
				chils[2].innerHTML="两次输入的密码不相同"
				chils[0].className="col-md-2 control-label required"
				return
			}
		}else if(this.name=="dorm"){//寝室号是否输入正确
			if(this.value.match(/^\d.*$/)&&this.value.length<4){
				chils[2].innerHTML=""
				chils[0].className="col-md-2 control-label"
			}else {
				chils[2].innerHTML="寝室号必须为纯数字且小于4位"
				chils[0].className="col-md-2 control-label required"
				return
			}
		}else if(this.name=="phone"){//手机号码是否输入正确
			if(this.value.match(/^\d.*$/)&&this.value.length==11){
				chils[2].innerHTML=""
				chils[0].className="col-md-2 control-label"
			}else {
				chils[2].innerHTML="手机号必须为纯数字，并且为11位"
				chils[0].className="col-md-2 control-label required"
				return
			}
		}
		else if(this.value.length>10||this.value.length<6){
			chils[2].innerHTML="长度不能小于6位，且不能大于10位"
			chils[0].className="col-md-2 control-label required"
			return
		}
		else {
			chils[2].innerHTML=""
			chils[0].className="col-md-2 control-label"
		}
	})
	var checkout=function(){
		var form=document.getElementById("create")
		var div=document.getElementById('img_b3')
		if(have_img==1){
			user_top=div.style.top.replace("px","")-0
			user_left=div.style.left.replace("px","")-0
			if((user_width=div.style.width.replace("px","")-0)&&(user_height=div.style.height.replace("px","")-0)){
			}else {
				user_width=150
				user_height=150
			}
			function getNaturalWidth() {
				var img = document.getElementById('imgPre')
				var image = new Image()
				image.src = img.src
				old_height=image.height
				old_width=image.width
			}
			getNaturalWidth()
		}
		if(document.getElementsByClassName("col-md-2 control-label required")[0]){
			alert("填写信息不正确，请检查确认正确后再提交")
		}else {
			var creates= {
				accounts : form.accounts.value,
				password : form.password2.value,
				name : form.name.value,
				phone : form.phone.value,
				building : form.building.value,
				dorm : form.dorm.value,
				user_top:user_top,
				user_left:user_left,
				user_width:user_width,
				user_height:user_height,
				old_height:old_height,
				old_width:old_width,
				have_img:have_img,
				user_img : user_img
			}
			$.ajax({
				type: "POST",
				url:"/app/user/create",
				data: creates,
				success: function(msg){
					var json_msg=eval('(' + msg + ')');
					if(json_msg.res=="1"){
						alert("该用户已经存在，请换个账号注册")
					}else {
						alert("注册成功,请前往主页登陆")
						window.localStorage.setItem("accounts",creates.accounts)
						window.localStorage.setItem("password",creates.password)
						window.location.href='/index.html'
					}
				}
			});
		}
	}
	var user_img,user_top,user_left,user_width,user_height,have_img=0,old_width,old_height

	function preImg(sourceId, targetId) {
		if (typeof FileReader === 'undefined') {
			alert('Your browser does not support FileReader...');
			return;
		}
		var reader = new FileReader();
		reader.onload = function(e) {
			if(document.getElementById(sourceId).files[0].type!="image/jpeg"){
				alert("图片应为JPG模式")
			}
			var img = document.getElementById(targetId);
			var img1=document.getElementById('img_1');
			img.src = this.result;
			img1.src = this.result;
			user_img = this.result.slice(23)
			have_img=1
		}
		reader.readAsDataURL(document.getElementById(sourceId).files[0]);
	}




	function img_sf(simg){
		var db=document.body;
		var img1=document.getElementById('img_1');
		var bl=[1,120/50,120/24];
		var div=document.getElementById('img_b3');
		var d_t=document.getElementById('img_b1');
		var d_y=document.getElementById('img_b4');
		var d_x=document.getElementById('img_b5');
		var d_l=document.getElementById('img_b2');
		var self={};
		var iwh=Math.min(simg.height,simg.width);//返回最小值
		var sf=document.getElementById('img_dsf');//用来改变剪切框的大小
		hw();//初始化img1 效果图的宽和高
		yd(div.offsetTop,div.offsetLeft);
		div.onmousedown=function(e){
			var e=e||event;
			self.x=e.clientX-this.offsetLeft;
			self.y=e.clientY+document.documentElement.scrollTop-this.offsetTop;
			try{e.preventDefault();}catch(o){e.returnValue = false;}
			document.onmousemove=function(e){
				var e=e||event;
				var t=e.clientY+document.documentElement.scrollTop-self.y;
				var l=e.clientX-self.x;
				t=Math.max(t,0);
				l=Math.max(l,0);
				t=Math.min(t,simg.height-div.offsetHeight);
				l=Math.min(l,simg.width-div.offsetWidth);
				yd(t,l);
			}
		}
		sf.onmousedown=div.onmouseup=function(){
			document.onmousemove='';
		}

		sf.onmousedown=function(e){
			var e=e||event;
			self.x=e.clientX-this.offsetLeft;
			self.y=e.clientY+document.documentElement.scrollTop-this.offsetTop;
			try{e.preventDefault();}catch(o){e.returnValue = false;}
			try{e.stopPropagation();}catch(o){e.cancelBubble = true;}
			document.onmousemove=function(e){
				var e=e||event;
				var t=e.clientY+document.documentElement.scrollTop-self.y;
				var l=e.clientX-self.x;
				l=Math.max(t,l);
				l=l>iwh?iwh:l;
				sff(l,l);
			}
		}

		function sff(t,l){
			sf.style.top=t+'px';
			sf.style.left=l+'px';
			div.style.width=(l+10)+'px';
			div.style.height=(t+10)+'px';
			yd(div.offsetTop,div.offsetLeft);
			var w=div.offsetWidth;
			bl=[w/120,w/50,w/24];
			hw();
			db.imgh=l+10;
		}

		function yd(t,l){
			d_t.style.height=t+'px';
			d_x.style.height=420-t-div.offsetHeight+'px';
			d_l.style.top=d_y.style.top=div.style.top=t+'px';
			d_l.style.width=div.style.left=l+'px';
			d_y.style.width=420-l-div.offsetWidth+'px';
			d_l.style.height=d_y.style.height=div.offsetHeight+'px';
			img1.style.top=-t/bl[0]+'px';
			img1.style.left=-l/bl[0]+'px';
			db.xy=[t,l];
		}

		function hw(){
			img1.height=simg.height/bl[0];
			img1.width=simg.width/bl[0];
		}
	}
</script>
</body>
</html>